<template>
  <div class="programmer">
    <div class="programmer-header">
      <h3 class="title">程序员</h3>
      <p class="tips">禁止发送色情、暴力、政治等敏感信息!违者封号!</p>
    </div>
    <div class="programmer-content">
      <div
        class="content-item"
        v-for="item in assistantData"
        :key="item.assistantId"
      >
        <div class="item-header">
          <h3>{{ item.title }}</h3>
          <p>{{ item.tag }}</p>
        </div>
        <div class="item-btn">
          <button @click="goChat(item)">使用</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from "vue";
// api
import { assistantList, type IAssistantItem } from "@api/chat";
// hooks
import { useChat } from "@hooks/useChat";
// 生命周期
onBeforeMount(() => {
  getAssistantList();
});
// 数据
const assistantData = ref<IAssistantItem[]>([]);
// 获取程序员功能列表
const getAssistantList = async () => {
  const res = await assistantList();
  if (res.code != 0) return;
  assistantData.value = res.data;
};
// 点击事件
const goChat = (item: IAssistantItem) => {
  useChat(item.code);
};
</script>

<style lang="scss" scoped>
.programmer {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 34px;
  display: flex;
  flex-direction: column;

  // background-color: aqua;
  // 头部
  &-header {
    .title {
      font-size: 16px;
      color: #232323;
      font-weight: 400;
      border-left: 2px solid #c90000;
      padding-left: 6px;
    }
    .tips {
      background: #fff7f7;
      border-radius: 5px;
      border: 1px solid #c90000;
      height: 28px;
      line-height: 28px;
      font-size: 11px;
      color: #c90000;
      margin-top: 11px;
      padding-left: 8px;
    }
  }
  // 内容区
  &-content {
    margin-top: 17px;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    flex: 1;
    padding: 36px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    overflow: auto;
    .content-item {
      background: url("@img/chat/programmer-box.png");
      width: 257px;
      height: 185px;
      background-size: 100%;
      // margin-bottom: 37px;
      padding: 19px 17px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h3 {
        font-size: 16px;
        color: #232323;
        font-weight: 700;
      }
      p {
        margin-top: 11px;
        color: #acacac;
        font-size: 11px;
      }
      .item-btn {
        text-align: center;
      }
      button {
        width: 161px;
        height: 20px;
        background: #c90000;
        border-radius: 6px 6px 6px 6px;
        color: #fff;
        font-size: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
